<!--代码逻辑和样式库-->
<script src="./role-manage.component.js"></script>
<style src="./role-manage.scss" scoped lang="scss"></style>

<template>
  <div>
    <div class="search-container">
      <el-form :model="searchForm" label-position="top" label-width="80px">
        <div class="aq-padding-bottom-8">数据筛选</div>
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-form-item class="aq-form-card">
              <div>职位名称<span class="aq-search-text">请按照职位名称搜索</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.queryStr" placeholder="请输入职位名称搜索" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-primary-button" @click="search()">筛选</div>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-warning-button" @click="onReset()">重置</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container">
      <div>职位列表</div>
      <div class="aq-padding-top-16 aq-padding-bottom-16">
        <el-button type="success" @click="openCreateOrEditDialog()">创建职位</el-button>
        <el-button type="danger" @click="deleteSelectedData()">批量删除</el-button>
      </div>
      <!--用户角色table-->
      <el-table v-loading="loading" :data="data" border fit highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column type="index" label="分类id" width="100" />
        <el-table-column prop="name" label="职位名称" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createUserName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="400">
          <template slot-scope="scope">
            <el-button v-if="codesCheck.indexOf('Edit') !== -1" plain type="primary" size="mini" @click="openSettingCodeDialog(scope.row)">权限配置</el-button>
            <el-button v-if="codesCheck.indexOf('Delete') != -1" plain type="danger" size="mini" @click="deleteSelectedData(scope.row.objectId,scope.row.name)">删除</el-button>
            <el-button v-if="codesCheck.indexOf('Edit') !== -1" plain type="success" size="mini" @click="openCreateOrEditDialog(scope.row)">编辑</el-button>
            <el-button v-if="codesCheck.indexOf('Edit') != -1" plain type="warning" size="mini" @click="openViewPersonnelDialog(scope.row)">查看授权人员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination class="pagination" v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <!-- 创建编辑 -->
    <create-role v-if="createOrEditDialogVisible" :role-id="selectRoleId" @reload="reload()" @close="closeCreateOrEditDialog"></create-role>
    <!-- 权限设置 -->
    <!-- <assign-permission v-if="settingCodesDialogVisible" :role-id="selectRoleId" @reload="reload()" @close="closeSettingCodeDialog"></assign-permission> -->
    <!-- 权限设置 -->
    <permission-setting v-if="settingCodesDialogVisible" :role-id="selectRoleId" @reload="reload()" @close="closeSettingCodeDialog"></permission-setting>
    <!-- 查看 -->
    <view-authorized-personnel v-if="viewAuthorizedPersonnelDialogVisible" :role-id="selectRoleId" @reload="reload()" @close="closeViewPersonnelDialog"></view-authorized-personnel>
  </div>
</template>
